<template>
	<statusBarVue title="发起需求" :isShowBar="true" :isShowLeft="true" />
	<view class="add-demand-page" :style="pageHaveBarStyle">
		<uni-list :border="false">
			<uni-forms ref="baseForm" class="form" :modelValue="baseFormData" :rules="rules" label-position="top"
				label-width="160px" :border="true">
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="服务方式" name="method" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<uni-data-checkbox class="rt" selectedColor="#30A46C" selectedTextColor="rgba(0,0,0,0.85)"
								v-model="baseFormData.method" :localdata="ways" />
						</template>
					</uni-list-item>
					<uni-list-item v-if="baseFormData.method === 1">
						<template v-slot:header>
							<uni-forms-item label="服务地址" name="serv_addr" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<picker :value="baseFormData.serv_addr" mode="region"
								@change="e => { this.baseFormData.serv_addr = e.detail.value; }">
								<text :class="(Array.isArray(baseFormData.serv_addr)) ? 'content' : 'placeholder'">
									{{ (Array.isArray(baseFormData.serv_addr)) ? (baseFormData.serv_addr).join(',') :
										'请选择服务地址' }}
								</text>
								<uni-icons type="forward" size="12"></uni-icons>
							</picker>
						</template>
					</uni-list-item>
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="服务时间" name="at" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<picker mode="date" :value="baseFormData.at" :end="baseFormData.deadline"
								@change="(e) => this.baseFormData.at = e.detail.value">
								<text :class="baseFormData.at ? 'content' : 'placeholder'">
									{{ baseFormData.at ? baseFormData.at : '请选择服务时间' }}
								</text>
								<uni-icons type="forward" size="12"></uni-icons>
							</picker>
						</template>
					</uni-list-item>
				</view>
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:body>
							<uni-forms-item label="需求领域（单选）" name="serv_domain" required>
								<view class="long-width">
									<uni-data-checkbox class="checklist-tag" mode="tag"
										v-model="baseFormData.serv_domain" selectedColor="#22A366"
										selectedTextColor="#fff" :localdata="domainListArrObj"></uni-data-checkbox>
								</view>
							</uni-forms-item>
						</template>
					</uni-list-item>
				</view>
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:body>
							<uni-forms-item label="需求类型（可多选）" name="service_types" required>
								<view class="long-width">
									<uni-data-checkbox multiple class="checklist-tag" mode="tag"
										v-model="baseFormData.service_types" selectedColor="#22A366"
										selectedTextColor="#fff" :localdata="typeListArrObj"></uni-data-checkbox>
								</view>
							</uni-forms-item>
						</template>
					</uni-list-item>
				</view>
				<!-- <view class="add-demand-page-group" v-else>
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="需求类型" name="method" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<picker :value="baseFormData.method" :range="typeListArr"
								@change="(e)=> this.baseFormData.method = e.detail.value">
								<text :class="(baseFormData.method !== undefined) ? 'content' : 'placeholder'">
									{{ (baseFormData.method !== undefined) ? typeListArr[baseFormData.method] : '请选择需求类型' }}
								</text>
								<uni-icons type="forward" size="12"></uni-icons>
							</picker>
						</template>
					</uni-list-item>
				</view> -->
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:body>
							<uni-forms-item label="需求标题" name="title" required>
								<view class="long-width">
									<uni-easyinput class="input" v-model="baseFormData.title" placeholder="请输入需求标题"
										:placeholderStyle="placeholderStyle" primaryColor="#22A366" />
								</view>
							</uni-forms-item>
						</template>
					</uni-list-item>
				</view>
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:body>
							<uni-forms-item label="详细描述" name="content" required>
								<view class="long-width">
									<uni-easyinput class="input textarea" type="textarea" maxlength="200"
										:placeholderStyle="placeholderStyle" v-model="baseFormData.content"
										placeholder="请描述具体施工内容，方便工友带齐工具，节省双方时间(200个字以内)" primaryColor="#22A366" />
								</view>
							</uni-forms-item>
						</template>
					</uni-list-item>
				</view>
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:body>
							<uni-forms-item label="附件" name="attachments" required>
								<view class="long-width">
									<!-- fileExtname="png,jpg,jpeg,mp4" -->
									<uni-file-picker title="您可以上传照片、视频、word文档、pdf文档等相关附件"
										v-model="baseFormData.attachments" fileMediatype="all" :image-styles="imgStyles"
										:list-styles="listStyles" mode="grid" @select="select" :limit="fileLimit">
										<view class="add-img-icon-group">
											<image src="/static/images/icon/add-images.png" class="add-img-icon">
											</image>
											<view class="add-img-text">点击上传</view>
										</view>
									</uni-file-picker>
								</view>
							</uni-forms-item>
						</template>
					</uni-list-item>
				</view>
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="价格" name="price" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<view class="price" @click="openPriceInp">
								<text class="text">¥{{ Number(baseFormData.price).toFixed(2) }}</text>
								<uni-icons type="forward" size="12"></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</view>
				<view class="add-demand-page-group">
					<uni-list-item>
						<template v-slot:header>
							<uni-forms-item label="需求截至时间" name="deadline" required></uni-forms-item>
						</template>
						<template v-slot:body>
							<view class="end-time">
								<picker mode="date" :value="baseFormData.deadline" :start="baseFormData.at"
									@change="(e) => this.baseFormData.deadline = e.detail.value">
									<text :class="baseFormData.deadline ? 'content' : 'placeholder'">
										{{ baseFormData.deadline ? baseFormData.deadline : '请选择项目结束时间' }}
									</text>
									<uni-icons type="forward" size="12"></uni-icons>
								</picker>
							</view>
						</template>
					</uni-list-item>
				</view>
			</uni-forms>
		</uni-list>
		<view class="submit">
			<button class="btn-submit" @click="handleSubmit">提交需求</button>
		</view>

		<!-- 价格 -->
		<uni-popup ref="pricePpopup" type="bottom" borderRadius="16px 16px 0 0" safeArea backgroundColor="#F3F3F5"
			@maskClick="handlePopupClose">
			<view class="price-popup">
				<view class="price-popup-h">
					<view class="tit">
						<view class="btn" @click="pricePopupTabIndex = 0"
							:class="pricePopupTabIndex === 0 ? 'active' : ''">
							一口价
						</view>
						<!-- <view class="btn" @click="pricePopupTabIndex = 1"
							:class="pricePopupTabIndex === 1 ? 'active' : ''">
							价格区间
						</view> -->
					</view>
					<button class="close" @click="handlePopupClose">
						<uni-icons type="closeempty"></uni-icons>
					</button>
				</view>
				<view class="price-popup-b">
					<view class="con fixed-price" v-if="pricePopupTabIndex === 0">
						<view class="tit">
							<text>价格</text>
							<text class="describe">
								<text class="icon-tips"></text>
								价格设置为0.00元则为面议
							</text>
						</view>
						<view class="input-group">
							<uni-easyinput type="digit" @blur="handleWindowArea" :inputBorder="false"
								primaryColor="#22A366" @input="(e) => { priceNum = e }" placeholder="0"
								@eyboardheightchange="handleOnFocusKeyboardHeight" v-model:number="priceNum" />
							<text class="unit">元</text>
						</view>
					</view>
					<view class="con range" v-if="pricePopupTabIndex === 1">
						<view class="tit">
							<text class="lt label">起始价</text>
							<text class="lt label">起始价</text>
						</view>
						<view class="group">
							<view class="input-group">
								<uni-easyinput type="digit" :inputBorder="false" primaryColor="#22A366"
									@keyboardheightchange="handleOnFocusKeyboardHeight" /><text class="unit">元</text>
							</view>
							<view class="separator">-</view>
							<view class="input-group">
								<uni-easyinput type="digit" :inputBorder="false" primaryColor="#22A366"
									@keyboardheightchange="handleOnFocusKeyboardHeight" /><text class="unit">元</text>
							</view>
						</view>
					</view>
					<view class="footer">
						<button class="btn lt btn-no" @click="handlePopupClose">取消</button>
						<button class="btn rt btn-yes" @click="handlePriceOk">确认</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		postWorksheetCreate
	} from '@/utils/api.js';

	import {
		publics
	} from '@/mixins/publics.js';

	import tool_oss from '@/utils/oss';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				imgStyles: {
					"height": 60, // 边框高度
					"width": 60, // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "50%" // 边框圆角，支持百分比
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: false,
					// 线条样式
					borderStyle: {
						width: 1,
						color: '#22A366',
						radius: 2
					}
				},
				priceNum: 0, // 价格
				fileLimit: 9,
				pricePopupTabIndex: 0,
				// 基础表单数据
				baseFormData: {
					price: 0,
					attachments: [],
					deadline: null
				},
				placeholderStyle: `fontFamily: PingFangSC-Regular;font-weight: 400;font-size: 15px;color: rgba(30, 31, 35, 0.3)`,
				// 校验规则
				rules: {
					method: {
						rules: [{
							required: true,
							errorMessage: '服务方式不能为空'
						}]
					},
					serv_addr: {
						rules: [{
							required: true,
							errorMessage: '服务地址不能为空'
						}]
					},
					at: {
						rules: [{
							required: true,
							errorMessage: '服务时间不能为空'
						}]
					},
					serv_domain: {
						rules: [{
							required: true,
							errorMessage: '需求领域不能为空'
						}]
					},
					service_types: {
						rules: [{
							required: true,
							errorMessage: '需求类型不能为空'
						}]
					},
					title: {
						rules: [{
							required: true,
							errorMessage: '需求标题不能为空'
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '详细描述不能为空'
						}]
					},
					attachments: {
						rules: [{
							required: true,
							errorMessage: '附件不能为空'
						}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '价格不能为空'
						}]
					},
					deadline: {
						rules: [{
							required: true,
							errorMessage: '需求截至时间不能为空'
						}]
					},
				},
			}
		},
		methods: {
			// 价格确认
			handlePriceOk() {
				this.baseFormData.price = this.priceNum;
				this.handlePopupClose()
			},
			handleChange(e) {
				this[keyName] = e.detail.value
			},
			openPriceInp() {
				this.$refs.pricePpopup.open('bottom')
			},
			handlePopupClose() {
				this.$refs.pricePpopup.close();
				this.priceNum = 0;
			},
			// 获取上传状态  【上传多个文件】
			select(e) {
				const fileArr = this.baseFormData.attachments;
				tool_oss.oss.upload(e.tempFiles, this.fileLimit).then(res => {
					console.log('res ---->>>', res);
					res.map(item => {
						const fileObj = {
							name: item.fileUploadSuccessObj.name
						};
						fileArr.push({
							"exif": JSON.stringify(fileObj),
							"url": item.fileUploadSuccessObj.url
						})
					});
					this.baseFormData.attachments = fileArr;
				});
			},
			// 提交需求
			handleSubmit() {
				this.$refs.baseForm.validate((err, formData) => {
					if (!err) {
						let postData = formData;
						postData.at = this.handleTimeStampToStr(formData.at);
						postData.deadline = this.handleTimeStampToStr(formData.deadline);
						postData.serv_addr = formData.serv_addr ? formData.serv_addr.join() : '';
						postData.price = String(formData.price);
						this.postWorksheetCreateApi(postData);
					}
				});
			},
			postWorksheetCreateApi(postData) {
				postWorksheetCreate(postData).then(res => {
					if (res.code === 200) {
						uni.showModal({
							title: '提示',
							content: '操作成功！',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.placeholder,
	.content {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #A5A5A7;
		margin-right: 10px;

		&.content {
			color: #1E1F23;
		}
	}

	textarea {
		box-sizing: border-box;
		height: 212px !important;
		padding: 6px 12px;
		margin: 0 !important;
	}

	.checklist-tag {
		.checklist-group {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;

			&>.checklist-box.is--tag {
				width: 100px;
				height: 32px;
				line-height: 32px;
				margin-right: 0 !important;
				padding: 0 !important;
				background: #EEF4F8;
				border-radius: 4px;
				border: none !important;

				.checklist-content {
					justify-content: center;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 14px;
					color: #2C2C2C;
				}
			}
		}
	}

	.add-demand-page {
		overflow: auto;
		margin: auto;
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		padding: 10px 2.66vw;
		box-sizing: border-box;
		z-index: 99;

		.add-demand-page-group {
			border-radius: 10px;
			margin-bottom: 10px;
			overflow: hidden;
			background-color: #fff;

			.price {
				font-family: PingFangSC-Semibold;
				font-weight: 600;
				font-size: 15px;
				color: #F04B40;

				.text {
					margin-right: 10px;
				}
			}

			.checklist-box:last-child {
				margin-right: 4px;
			}

			.uni-data-checklist .checklist-group {
				.checklist-box {
					.checklist-text {
						font-size: 15px;
						color: rgba(0, 0, 0, 0.85);
					}
				}
			}
		}

		.long-width {
			width: 88.27vw;
			margin-top: 8px;

			.file-title {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 13px;
				color: rgba(30, 31, 35, 0.4);
			}

			.add-img-icon-group {
				width: 102px;
				height: 102px;
				background: #F5F6FA;
				border-radius: 4px;
				opacity: 0.3;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.add-img-icon {
					width: 26px;
					height: 26px;
				}

				.add-img-text {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 13px;
					color: #1E1F23;
				}
			}

			.file-picker__box-content {}
		}

		.uni-forms-item {
			&.is-direction-top {
				.uni-forms-item__label {
					line-height: inherit;
					height: auto;
					padding: 0;
					font-weight: bold;
					color: #1E1F23;
					font-size: 15px;
				}
			}

			&.uni-forms-item--border {
				padding: 0;
				border: none;
			}

			.uni-easyinput__content,
			.is-add {
				background: #F5F6FA !important;
				border-radius: 4px;
			}
		}


		.uni-list {
			background: none;

			.uni-list-item__content-title {
				height: auto;
				font-family: PingFangSC-SNaNpxibold;
				font-weight: bold;
				font-size: 14px;
				color: #606266;
			}

			.list-item {
				.uni-list-item__container {
					height: 35px;
					line-height: 35px;
				}
			}
		}


		.uni-list-item__container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			&-title {
				font-size: 16px;
			}
		}

		.submit {
			width: 100%;
			height: auo;
			margin-top: 10px;

			.btn-submit {
				width: 94.67vw;
				height: 45px;
				background: #22A366;
				border-radius: 8px;
				color: #fff;
				font-weight: 400;
				font-size: 17px;
			}
		}

		.price-popup {
			background: #fff;
			border-radius: 16px 16px 0 0;
			padding: 14px 16px;

			&-h {
				width: 100%;
				height: 27px;
				line-height: 27px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tit {
					font-weight: 600;
					font-size: 16px;
					color: #131315;
					height: 50px;
					line-height: 50px;
					display: flex;

					.btn {
						font-weight: 400;
						font-size: 16px;
						color: #161616;
						margin-right: 30px;
						position: relative;

						&.active {
							color: #22A366;
							font-weight: 600;

							&::after {
								display: inline-block;
								content: '';
								width: 16px;
								height: 3px;
								background: #22A366;
								border-radius: 2px;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 8px;
								margin: auto;
							}
						}
					}
				}

				.close {
					width: 16px;
					height: 16px;
					line-height: 16px;
					border-radius: 100%;
					color: #9A9FB3;
					margin: initial;
					padding: 0;
					text-align: center;
				}
			}

			&-b {
				padding: 14px 0;

				.input-group {
					width: 100%;
					height: 42px;
					background: #FFFFFF;
					border: 3px solid #22a36633;
					border-radius: 6px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 18px;
					box-sizing: border-box;

					input {
						width: calc(100% - 30px);
					}

					&.active {
						border: 5px solid #22A366;
					}
				}

				.fixed-price {
					.tit {
						color: #B6B6B6;
						font-size: 14px;
						font-family: PingFangSC-Regular;
						display: flex;
						justify-content: space-between;
						margin-bottom: 4px;

						.describe {
							font-weight: 400;
							color: #22A366;

							.icon-tips {
								display: inline-block;
								width: 14px;
								height: 14px;
								background: url("/static/images/icon/tips.png") no-repeat 0 0;
								background-size: 100% 100%;
							}
						}
					}
				}

				.range {
					.separator {
						width: 10px;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 16px;
						color: #B6B6B6;
						text-align: center;
					}

					.tit {
						overflow: hidden;

						&>.label {
							width: 50%;
							color: #B6B6B6;
							font-size: 14px;

							&:last-child {
								width: calc(50% - 10px);
							}

							&:nth-child(1) {
								width: calc(50% + 10px);
							}
						}
					}

					&>.group {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.input-group {
							width: calc(50% - 10px);
						}

					}
				}

				.footer {
					margin-top: 24px;
					overflow: hidden;

					.btn {
						width: 40vw;
						height: 45px;
						border-radius: 8px;

						&::after {
							border: none;
						}

						&-no {
							color: #22A366;
							background-color: #F5F6FA;
						}

						&-yes {
							color: #fff;
							background-color: #22A366;
						}
					}
				}

			}
		}

	}
</style>